5-3 React Router v6简明示例
项目初始化
使用 Vite 创建 React + TypeScript 项目，并安装 React Router：
# 创建项目
npm create vite@latest react-router-v6 -- --template react-ts
# 进入项目目录
cd react-router-v6
# 安装依赖
npm install
# 安装 React Router 和 History
npm install react-router-dom@6 history@5
bash
基础路由配置
1. 创建页面组件
// src/pages/Home.tsx
export default function Home() {
return <div><h1>首页</h1><p>欢迎来到 React Router v6 示例应用</p></div>;
}
// src/pages/About.tsx
export default function About() {
return <div><h1>关于</h1><p>这是一个学习 React Router v6 的示例项目</p></div>;
}
// src/pages/Contact.tsx
export default function Contact() {
return <div><h1>联系我们</h1><p>邮箱：hello@example.com</p></div>;
}
tsx
2. 配置路由
// src/App.tsx
import { BrowserRouter, Routes, Route, Link, Outlet } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
// 布局组件（使用 Outlet 渲染子路由）
function Layout() {
return (
<div>
<nav>
<Link to="/">首页</Link> | {' '}
<Link to="/about">关于</Link> | {' '}
<Link to="/contact">联系我们</Link>
</nav>
<hr />
<Outlet /> {/* 子路由渲染在这里 */}
</div>
);
}
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} /> {/* index 表示默认子路由 */}
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>
);
}
tsx
3. 启动项目
npm run dev
# 访问 http://localhost:5173
bash
嵌套路由与 Outlet
<Outlet /> 是 React Router v6 中实现嵌套路由的核心组件。它充当一个"插槽"，父路由组件中 <Outlet /> 的位置会被匹配到的子路由组件替换。
// 父路由 Layout 组件
function Layout() {
return (
<div>
<nav>导航栏</nav>
<main>
<Outlet /> {/* 子路由组件渲染在这里 */}
</main>
<footer>页脚</footer>
</div>
);
}
// 路由配置
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
</Route>
// 当访问 /about 时，页面结构为：
// <Layout>
// <nav>导航栏</nav>
// <main>
// <About /> ← Outlet 被 About 替换
// </main>
// <footer>页脚</footer>
// </Layout>
tsx
导航组件
Link 组件
import { Link } from 'react-router-dom';
// 基础导航
<Link to="/about">关于</Link>
// 带参数导航
<Link to={`/users/${userId}`}>用户详情</Link>
// 带查询参数
<Link to="/search?keyword=react&page=1">搜索</Link>
tsx
NavLink 组件（高亮当前路由）
import { NavLink } from 'react-router-dom';
function Nav() {
return (
<nav>
<NavLink
to="/"
className={({ isActive }) => isActive ? 'active' : ''}
>
首页
</NavLink>
<NavLink
to="/about"
style={({ isActive }) => ({
color: isActive ? 'red' : 'black',
fontWeight: isActive ? 'bold' : 'normal',
})}
>
关于
</NavLink>
</nav>
);
}
tsx
useNavigate 编程式导航
import { useNavigate } from 'react-router-dom';
function LoginForm() {
const navigate = useNavigate();
const handleLogin = async () => {
// 模拟登录
await login(username, password);
// 登录成功后跳转
navigate('/dashboard');
// 或替换当前历史记录（不可回退）
// navigate('/dashboard', { replace: true });
// 或返回上一页
// navigate(-1);
};
return <button onClick={handleLogin}>登录</button>;
}
tsx
useParams 路径参数
import { useParams } from 'react-router-dom';
// 路由配置：<Route path="/users/:id" element={<UserDetail />} />
function UserDetail() {
const { id } = useParams();
return <div>用户 ID: {id}</div>;
}
// 访问 /users/123 → 页面显示 "用户 ID: 123"
tsx
完整的路由结构示意
<BrowserRouter>
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="about" element={<About />} />
<Route path="users" element={<Users />}>
<Route path=":id" element={<UserDetail />} />
</Route>
<Route path="contact" element={<Contact />} />
</Route>
</Routes>
</BrowserRouter>
text
这个示例覆盖了 React Router v6 最常用的功能：路由配置、嵌套路由、导航链接、路径参数和编程式导航。
↑